<template>
  <view class="page">
    <!--		查看规则浮窗-->
    <view
      class="rule-float d-flex align-center justify-center"
      @click="
        () =>
          $uni.navigateTo({
            url: handleUrlParams('/pages/imagePage/index', {
              urlPrefixList: encodeURIComponent(JSON.stringify(['H4bPXXzvcmygPKPaWiVF.png'])),
              pageTitle: '自习室规则',
              shareInfo: encodeURIComponent(
                JSON.stringify({
                  title: '点击了解自习室规则，开启学习打卡！',
                  imageUrl: getShowNginxPicUrl('20240605135812.png'),
                }),
              ),
            }),
          })
      "
      >自习室规则</view
    >

    <view class="form">
      <view class="form-item">
        <view class="label">
          <image class="icon" :src="targetIcon"></image>
          <view class="text">本次学习目标（必填）：</view>
        </view>
        <view class="value">
          <view class="input-container">
            <input v-model="inputForm.studyGoal" placeholder="输入学习目标，激励自己一下~" class="input" />
          </view>
          <view class="label-list d-flex">
            <view class="label-item" v-for="tag in studyGoalTags" :key="tag" @click="() => (inputForm.studyGoal = tag)">{{ tag }}</view>
          </view>
        </view>
      </view>

      <view class="form-item">
        <view class="label">
          <image class="icon" :src="calendarIcon"></image>
          <view class="text">本次学习计划（必填）：</view>
        </view>
        <view class="value">
          <view class="input-container">
            <textarea v-model="inputForm.studyPlan" placeholder="1、背+复习100个单词；2、刷一套英语真题" class="input textarea" />
          </view>
        </view>
      </view>

      <view class="form-item">
        <view class="label">
          <image class="icon" :src="clockIcon"></image>
          <view class="text">本次目标时长（必填）：</view>
        </view>

        <studyDurationInput
          ref="studyDurationInput"
          :target-duration.sync="inputForm.targetDuration"
          v-if="!valIsEmpty(inputForm.targetDuration)"
        ></studyDurationInput>
      </view>

      <view class="submit-btn d-flex align-center justify-center" @click="submit">开始学习</view>
    </view>

    <!--		活动详情浮窗(点击跳转到活动详情界面)-->
    <activityDetailFloat
      :study-activity-id="inputForm.activityId"
      v-if="inputForm.classroomType === 'ActivitySpecific'"
    ></activityDetailFloat>
  </view>
</template>

<script>
import targetIcon from "./assets/target.png"
import calendarIcon from "./assets/calendar.png"
import clockIcon from "./assets/clock.png"
import { cloneDeep, handleUrlParams, showToast, valIsEmpty } from "@/utils"
import request from "@/utils/request"
import studyDurationInput from "./components/studyDurationInput.vue"
import activityDetailFloat from "@/studyRoom/components/activityDetailFloat/index.vue"
import { getShowNginxPicUrl } from "@/utils/settings"
import store from "@/store"
import { studyRoomActionType } from "@/store/modules/studyRoom"

export default {
  components: { studyDurationInput, activityDetailFloat },
  data() {
    return {
      inputForm: {
        studyRoomId: "",
        targetDuration: 0,
        studyGoal: "",
        studyPlan: "",
        activityId: "", //与该自习室绑定的活动id
      },
      studyGoalTags: ["考研", "CET", "专业课"],
      targetIcon,
      calendarIcon,
      clockIcon,
    }
  },
  onLoad(query) {
    const details = store.getters[studyRoomActionType.getters.studyRoomDetails]
    if (details) {
      this.inputForm = cloneDeep(details)
			store.commit(studyRoomActionType.mutations.studyRoomDetails, null)
      console.log(this.inputForm, "this.inputForm")
    }
    this.inputForm.studyRoomId = query.studyRoomId
    this.$nextTick(() => {
      this.$refs.studyDurationInput.echoData()
    })
  },
  methods: {
    handleUrlParams,
    getShowNginxPicUrl,
    valIsEmpty,
    submit() {
      if (!this.inputForm.studyGoal) {
        showToast.default("请填写学习目标")
        return
      }
      if (!this.inputForm.studyPlan) {
        showToast.default("请填写学习计划")
        return
      }
      if (!this.$refs.studyDurationInput.beforeSubmit()) {
        return
      }
      request({
        url: "studyRoomUserPlan/addUserPlan",
        data: this.inputForm,
        showLoading: true,
        errorHandle: true,
      }).then(() => {
        //跳转到自习室自习页面
        request({
          url: "studyRoom/allowEntryJoinStudy",
          data: {
            studyRoomId: this.inputForm.studyRoomId,
          },
          showLoading: true,
          errorHandle: true,
        }).then((data) => {
					store.commit(studyRoomActionType.mutations.studyRoomDetails, data.resultData)
          uni.redirectTo({
            url: "/studyRoom/pages/learning/index",
          })
        })
      })
    },
  },
  // 右上角分享
  onShareAppMessage() {
    return {
      title: "点击了解自习室规则，开启学习打卡！",
      imageUrl: this.getShowNginxPicUrl("20240605135812.png"),
    }
  },
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: var(--background-color);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;

  .rule-float {
    position: absolute;
    right: 0;
    top: 20rpx;
    color: rgba(16, 16, 16, 1);
    background-color: rgba(187, 187, 187, 0.23);
    border-radius: 30rpx 0 0 30rpx;
    font-size: 30rpx;
    width: 180rpx;
    height: 50rpx;
  }

  .form {
    padding: 30rpx;
    .form-item {
      &:not(:first-child) {
        margin-top: 50rpx;
      }
      .label {
        display: flex;
        align-items: center;
        .icon {
          width: 46rpx;
          height: 46rpx;
        }
        .text {
          font-size: 34rpx;
          margin-left: 14rpx;
        }
      }
      .value {
        margin-top: 20rpx;
        .input-container {
          padding: 20rpx;
          border: 2rpx solid #2cb980;
          background: white;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          .input {
            width: 100%;
            font-size: 30rpx;
          }
          .textarea {
            height: 150rpx;
          }
        }
        .label-list {
          margin-top: 20rpx;
          .label-item {
            margin-right: 20rpx;
            height: 50rpx;
            line-height: 50rpx;
            padding: 0 20rpx;
            background: #d7eee7;
            color: #2cb980;
            font-size: 30rpx;
            border-radius: 25rpx;
          }
        }
      }
    }

    .submit-btn {
      margin: {
        top: 50rpx;
        left: auto;
        right: auto;
      }
      color: white;
      font-size: 32rpx;
      width: 446rpx;
      height: 68rpx;
      border-radius: 8rpx;
      background: #54bd81;
    }
  }
}
</style>
